<template>
  <div id="home">
    <nav-bar backColor="#ff8198" fontColor="#fff">
      <div slot="center">购物街</div>
    </nav-bar>
    <!-- 标签-吸顶页 -->
    <tab-control
      v-show="isFixed"
      class="tabControl-fixed"
      :tabTitles="tabTitles"
      @changeTabPane="changeTabPane"
      :currentIndex="currentIndex"
    ></tab-control>
    <!-- 滚动 -->
    <scroll
      class="scroll"
      ref="scroll"
      :probeType="3"
      :click="true"
      :listenScroll="true"
      :pullup="true"
      @scroll="scroll"
      @scrollToEnd="scrollToEnd"
    >
      <swiper :imgList="imgList"></swiper>
      <!-- 推荐 -->
      <div class="recommend">
        <div class="recom-item" v-for="item in recommend" :key="item.image">
          <img :src="item.image" />
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
      <!-- 本周流行 -->
      <div class="fashion">
        <img src="~assets/img/home/recommend_bg.jpg" />
      </div>
      <!-- 标签页 -->
      <tab-control
        :tabTitles="tabTitles"
        ref="tabControl"
        @changeTabPane="changeTabPane"
        :currentIndex="currentIndex"
      ></tab-control>
      <good-list :columns="2">
        <good-item
          v-for="(item, index) in serverData"
          :key="index"
          :img="item.show.img"
          :iid="item.iid"
          :title="item.title"
          :price="item.price"
          :cfav="Number(item.cfav)"
        >
        </good-item>
      </good-list>
    </scroll>
    <back-top @backTopClick="backTopClick" class="back-top" v-show="isBackTop">
      <img src="~assets/img/common/top.png" />
    </back-top>
  </div>
</template>

<script>
import NavBar from "components/common/navBar/NavBar";
import Swiper from "components/common/swiper/Swiper";
import Scroll from "components/common/scroll/Scroll";
import TabControl from "components/common/tabControl/TabControl";
import GoodList from "components/content/goodList/GoodList";
import GoodItem from "components/content/goodList/GoodItem";
import BackTop from "components/content/backTop/BackTop";
import { getMultidata, getHomeProducts } from "netword/home/home";

export default {
  name: "Home",
  components: {
    NavBar,
    Swiper,
    Scroll,
    TabControl,
    GoodList,
    GoodItem,
    BackTop,
  },
  data() {
    return {
      tabTitles: ["流行", "新款", "精选"],
      imgList: [],
      recommend: [],
      serverData: [],
      goodsList: {
        pop: { page: 1, list: [] },
        new: { page: 1, list: [] },
        sell: { page: 1, list: [] },
      },
      currentType: "pop",
      currentIndex: 0,
      isFixed: false,
      isBackTop: false,
    };
  },
  computed: {
  },
  created() {
    this.getMultidata();
    //获取首页商品数据
    this.getHomeProducts("pop");
    this.getHomeProducts("new");
    this.getHomeProducts("sell");
    this.serverData = this.goodsList[this.currentType].list;
  },
  methods: {
    //滚动事件
    scroll(pos) {
      //是否吸顶状态
      this.isFixed = pos.y <= -this.$refs.tabControl.$el.offsetTop;
      //返回顶部
      this.isBackTop = pos.y < -1000;
    },
    //滚动到底部
    scrollToEnd() {
      //加载新商品数据
      this.getHomeProducts(this.currentType);
    },
    //返回顶部
    backTopClick() {
      this.$refs.scroll.scrollTo(0, 0, 300);
    },

    //获取首页数据
    getMultidata() {
      getMultidata().then((res) => {
        //轮播图
        this.imgList = res.data.banner.list.map((e) => e.image);
        //推荐数据
        this.recommend = res.data.recommend.list;
        //刷新滚动
        this.$nextTick(() => {
          this.$refs.scroll.refresh();
        });
      });
    },
    //获取首页商品列表
    getHomeProducts(type) {
      getHomeProducts(type, this.goodsList[type].page).then((res) => {
        this.goodsList[type].list.push(...res.data.list);
        this.goodsList[type].page++;
        //刷新滚动
        this.$nextTick(() => {
          this.$refs.scroll.refresh();
        });
      });
    },
    changeTabPane(index) {
      this.currentIndex = index;
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
      this.serverData = this.goodsList[this.currentType].list;
    },
  },
};
</script>

<style scoped>
.recommend {
  display: flex;
  justify-content: space-around;
  height: 155px;
  border-bottom: solid 10px #eeeeee;
}
.recommend img {
  width: 80px;
  height: 80px;
}
.recom-item {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.recom-item .title {
  margin-bottom: 20px;
}
.fashion img {
  width: 100%;
}
.scroll {
  height: calc(100vh - 44px - 49px);
}
.tabControl-fixed {
  position: fixed;
  top: 44px;
  left: 0;
  z-index: 2;
  background: #fff;
}
.back-top {
  position: fixed;
  right: 10px;
  bottom: 60px;
}
</style>>